<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>学生基本信息</title>
		<!--不允许缩放-->
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
		<!--优先选择chrome内核-->
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<link rel="stylesheet " type="text/css " href="css/globle.css " />
		<link rel="stylesheet " type="text/css " href="css/style.css " />

		<script src="jquery-3.1.1.js"></script>
	</head>

	<body>
		<h2>出现</h2>
		<p class="content"></p>
		<button>获取一个学生的信息</button>
		<div class="student-info"></div>
		<script type="text/javascript">
			$('button').on('click', function() {
				var xhr2 = new XMLHttpRequest;
				xhr2.onreadystatechange = function() {
					if(xhr.readyState == 4) {
						if(xhr2.status == 200) {
							$('.student-info').html(xhr2.responseText);
						}
					}
				}
				var ran = Math.floor(Math.random() * 100);
				xhr2.open('GET', '/student?name=aaaa&age=' + ran, true);
				xhr2.send(null)
			})

			//创建一个XMLHttprequest对象
			var xhr = new XMLHttpRequest();

			//自定义异步处理
			xhr.onreadystatechange = function() {
				//xhr.readyState每个阶段状态的代码是0~4
				//0 未初始化   尚未调用open方法
				//1.启动           已经调用open()方法，尚未调用send()
				//2.发送            已经调用send() 尚未接到响应
				//3.接收           已经接收部分数据，尚未完全接受
				//4.发生           已经接受全部数据
				if(xhr.readyState == 0) {
					console.log('未初始化')
				} else if(xhr.readyState == 1) {
					console.log('启动')
				} else if(xhr.readyState == 2) {
					console.log('发送')
				} else if(xhr.readyState == 3) {
					console.log('接收')
				} else if(xhr.readyState == 4) {
					console.log('发生');
					if(xhr.status == 200) {
						console.log(xhr.responseText);
						$('h2').on('click', function() {
							$('.content').html(xhr.responseText);
						})

					}
				}
			}

			//xhr.open()
			//参数一：请求方法
			//参数二：请求地址
			//参数三：是否为异步请求 true 是异步请求

			//如果是同步请求和alert()效果类似，页面会卡死
			xhr.open('GET', 'student?name="张三"&age=20', true)

			//open方法执行后并不会发出http请求，而只是开启一个请求，然后要通过
			//send()来发送请求

			//send()
			//参数是请求体
			//因为get请求没有请求体，所有null
			xhr.send(null);
			//alert(1);
		</script>

	</body>

</html>